<template>
  <div class="people-container">
    <div class="search-box">
      人员搜索：
      <el-input v-model="userName" placeholder="请输入" class="searchIpt" />
      角色：
      <el-input v-model="roleName" placeholder="请输入" class="searchIpt" />
      <el-button icon="el-icon-search" @click="searchItem">搜索</el-button>
    </div>

    <div class="table-container">

      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="userName" label="人员名称" />
        <el-table-column prop="roleName" label="角色" />
        <el-table-column prop="mobile" label="联系电话" />
        <el-table-column prop="workCount" label="完成工单(本月)" />
        <el-table-column prop="progressTotal" label="进行中工单" />
        <el-table-column prop="cancelCount" label="拒绝工单(本月)" />
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button size="mini" @click="check(row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 底部分页 -->
      <div class="pagination">
        <span class="total">共{{ totalCount }}条记录</span>
        <span class="currentPage">第{{ pageIndex }}/{{ totalPage }}页</span>
        <el-button class="changeBtn" @click="prePage">上一页</el-button>
        <el-button class="changeBtn" @click="nextPage">下一页</el-button>
      </div>
    </div>

    <!-- 对话框 -->
    <!-- <addAndEdit ref="addAndEditRef" :title="title" /> -->
  </div>
</template>
<script>
// import addAndEdit from './components/addAndEdit.vue'
import { getWorkLoadListRequest } from '../../api/people.js'
export default {
  name: '',
  // components: { addAndEdit },
  data() {
    return {
      // table数据
      tableData: [],
      title: '',
      userName: '',
      roleName: '',
      pageIndex: '1',
      pageSize: '10',
      totalCount: '',
      totalPage: ''
    }
  },
  computed: {
  },
  created() {
    this.getWorkLoadList()
  },
  methods: {
    // 上一页
    prePage() {
      if (this.pageIndex <= 1) {
        return
      }
      this.pageIndex--
      this.getWorkLoadList()
    },
    // 下一页
    nextPage() {
      if (this.pageIndex >= this.totalPage) {
        return
      }
      this.pageIndex++
      this.getWorkLoadList()
    },
    // 搜索
    async searchItem() {
      const res = await getWorkLoadListRequest({ userName: this.userName, roleName: this.roleName })
      console.log(res, 67)
      this.tableData = res.data.currentPageRecords
      this.totalCount = res.data.totalCount
      this.totalPage = res.data.totalPage
    },
    // table渲染
    async getWorkLoadList() {
      const res = await getWorkLoadListRequest({ pageIndex: this.pageIndex, pageSize: this.pageSize })
      console.log(res, 988)
      this.tableData = res.data.currentPageRecords
      this.totalCount = res.data.totalCount
      this.totalPage = res.data.totalPage
    },
    check(row) {

    }
  }
}
</script>
<style lang='scss'  scoped>
.people-container {
  // height: 100vh;
  // background-color: pink;
}

.search-box {
  background-color: #fff;
  padding: 18px;
  font-size: 14px;
  color: rgb(93, 89, 89);

  .el-button {
    background-color: #6783f7;
    border: 0;
    color: #fff;
    height: 36px;
  }
}

::v-deep .searchIpt {
  width: 300px;
  height: 36px;
  margin-right: 18px;

  .el-input__inner {
    height: 36px;
  }
}

.table-container {
  padding: 20px;
  background-color: forestgreen;

  .el-button {
    background-color: #ef8648;
    border: 0;
    color: #fff;
    margin-bottom: 20px;
  }
}

::v-deep .el-form-item__label {
  font-weight: normal;
}

::v-deep .el-form-item__content {
  width: 70%;
}
</style>
